﻿@page "/fetchdata/todoitem/create"

@using MaBlaApp.Data
@inject TodoService MyTodoService
@inject IJSRuntime JSRuntime

<ul class="list-group">
    <li class="list-group-item list-group-item-primary d-flex justify-content-between">
        <strong class="align-self-center">新建任务</strong>
        <button class="btn btn-primary btn-sm" @onclick=Back>返回</button>
    </li>
</ul>

<ul class="list-group" style="overflow:auto">
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">@nameof(todoItem.Id)</strong>
        <small>@todoItem.Id</small>
    </li>
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">@nameof(todoItem.Title)</strong>
        <input type="text" class="form-control" style="width: 50%;" maxlength="20"
        @bind-value="todoItem.Title" placeholder="任务标题" />
    </li>
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">@nameof(todoItem.Description)</strong>
        <input type="text" class="form-control" style="width: 50%;" maxlength="20"
        @bind-value="todoItem.Description" placeholder="任务描述" />
    </li>
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">@nameof(todoItem.CreatedDate)</strong>
        <input type="date" class="form-control" style="width: 50%;"
        @bind-value="todoItem.CreatedDate" min="2023-1-1" max="2023-12-31" />
    </li>
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">优先级</strong>
        <select class="form-control" style="width: 50%;"
        @bind="todoItem.Priority">
            <option value=@TodoPriority.Low>低</option>
            <option value=@TodoPriority.Middle>中</option>
            <option value=@TodoPriority.High>高</option>
        </select>
    </li>
    
    <li class="list-group-item d-grid">
        <button class="btn btn-primary btn-sm btn-block" @onclick=SaveToto>保存</button>
    </li>

</ul>

@code {

    private TodoItem todoItem = new TodoItem();

    protected override void OnInitialized()
    {
        todoItem.Id = MyTodoService.TodoItems.Count + 1;
    }

    private async void Back()
    {
        await JSRuntime.InvokeVoidAsync("window.history.back");
    }

    private void SaveToto()
    {
        MyTodoService.AddTodo(todoItem);

        Back();
    }
}
